<template>
  <svg width="10" height="10" ref="svg"></svg>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Ref } from "vue-property-decorator";
import * as d3 from "d3";
import Icon from "@/components/TriangleChart/Icon";

@Component({
  name: "ComplexHeaderLegend",
  components: {}
})
export default class ComplexHeaderLegend extends Vue {
  @Prop({
    required: true
  })
  private option!: ComplexPointCountColumn;

  @Ref("svg")
  private $svg!: SVGElement;

  private svg!: d3.Selection<any, any, any, any>;

  @Watch("option", { immediate: true })
  onOptionChange() {
    if (!this.$svg) return;

    this.start();
  }

  mounted() {
    this.start();
  }

  private start() {
    this.$svg.innerHTML = "";
    this.svg = d3.select(this.$svg);

    const defs = this.svg.append("defs");
    const id = Icon.createIconMapping({ ...this.option.icon, size: 8 }, defs);
    this.svg
      .append("use")
      .attr("xlink:href", "#" + id)
      .attr("width", 8)
      .attr("height", 8);
  }
}
</script>
<style lang="scss" scoped>
.complex-header-legend {
}
</style>
